$(function(){
	

	var data = localStorage.getItem("cart")
	data= JSON.parse(data)
		var toatalss = data.length 
	var str = ''
	for (var i = 0; i < data.length; i++) {
			str += `
				<li class="mui-table-view-cell" style="width: 100%;">
					<!-- 左滑删除 -->
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<!-- 商品信息卡 -->
					<div class="shopCartItem mui-slider-handle">
						<!-- 复选框 -->
						<div class="mui-input-row mui-checkbox mui-left box">
							<input class="iptSelect" type="checkbox" name="iptSelect">
						</div>
						<!-- 商品信息 -->
						<img src="${data[i].pic}" />
						<div class="goodsInfo">
							<div class="shopTitle">${data[i].title}</div>
							<p>${data[i].canshu}</p>
							<div class="shopPrice"> ¥${data[i].price} </div>
							<!-- 加减商品 -->
							<div class="product_num">
								<em class="minus">-</em>
								<input class="num" type="text" value="${data[i].count}" />
								<em class="add">+</em>
							</div>
						</div>
						<div class="goodsOpreation">
							<span class="goodsCount">商品数量:1</span>
							<span class="shopDel">删除</span>
						</div>
					</div>
				</li>
			`
	}
	
	$(".mycarBox").html(str)
	
	
	// 删除操作(从界面和localStorage中删除)
	mui(".mui-table-view-cell").on("tap",".mui-btn",function(){
		
		
		
		var btnArr=['确定','再看看'];
		var thisNode = $(this).parent().parent();
		// thisNode为<li class="mui-table-view-cell">
		mui.confirm('','确定删除该商品?',btnArr,function(e){
			if(e.index==0){
				if(thisNode.find(".iptSelect").prop("checked")){
					$(thisNode).remove();
					total();
				}else{
					$(thisNode).remove();
				}
			}
		})	
	})
	
	// 加减按钮
	$('.add').click(function(){
		var value = $(this).prev().val();
		var num = parseInt(value) + 1;
		$(this).prev().val(num);
		// 若此按钮所属商品被选中,则点击此按钮时,重新计算合计金额
		if($(this).parents(".shopCartItem").find(".iptSelect").prop("checked")){total()};
	})
	$(".minus").click(function(){
		var value = $(this).next().val();
		var num = parseInt(value);
		if(num>1){
			num = parseInt(value) - 1;
			$(this).next().val(num);
		}else{
			mui.toast("宝贝不能在减少了哦");
		}
		// 若此按钮所属商品被选中,则点击此按钮时,重新计算合计金额
		if($(this).parents(".shopCartItem").find(".iptSelect").prop("checked")){total()};
	})
	
	// 全选按钮
	$("#circleCK").click(function(){
		$(":checkbox[name='iptSelect']").prop("checked", this.checked);
		total();
	})
	
	// 合计
	$(".iptSelect").click(function(){
		console.log(1)
		total();
		if($("#circleCK").prop("checked") != true){
			// 如果3个商品都被选中,激活全选按钮
			if($("input:checkbox:checked").length==toatalss){	
				$("#circleCK").prop("checked", true);
			}
		}
		else{
			// 如果除了全选按钮,有一个商品都没被选中,取消激活全选按钮(加上全选按钮,共4个按钮)
			if($("input:checkbox:checked").length< toatalss + 1){
				$("#circleCK").prop("checked", false);
			}
		}
	})
	
	// 合计函数total()
	function total(){
		if($("input:checkbox:checked").length){
			var num = 0;
			var unit_price = 0;
			// 总金额变量,总件数 需累加
			var money = 0;
			var all_num = 0;
			// 循环遍历每一个被选中的checkbox按钮
			$("input:checkbox:checked").each(function(){
				// $(this)指的是循环到的此checkbox按钮, 用if过滤掉全选按钮
				if($(this).attr("class") != "circleCK"){
					// html中单价前面有一个空格和一个"¥"符号,所以用substr(2)去除这两个字符,最后得到单价数字
					unit_price = parseFloat($(this).parent().nextAll(".goodsInfo").find(".shopPrice").html().substr(2));
					// 此处.val()的得到的是字符串,要转化成数字
					num = parseInt($(this).parent().nextAll(".goodsInfo").find(".num").val());
					money += num * unit_price;
					all_num += num;	
				}
			})
			$('.big').html(money.toFixed(2).split(".")[0]+".");
			$('.small').html(money.toFixed(2).split(".")[1]);
			$('.buyNowBtn').html("结算 ("+all_num+")");
		}else{
			$('.big').html("0");
			$(".small").html("");
			$('.buyNowBtn').html("结算");
		}
	}
})

